// 获取DOM元素
var header = document.querySelector('header');
var logoa = document.querySelector('.logo').children[0];
var nava = document.querySelector('nav').children;
var jiantou = document.querySelectorAll('.jiantou');
var hMask = document.querySelector('.mask');

var oopen = document.querySelector('.open');

var sildeshow = document.querySelector('.threeBig');
var list = document.querySelector('.sildeshow-main');
var liDom = list.children;
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var item = document.querySelectorAll('.item');

var can = document.querySelector('.can');
var canBtm = document.querySelector('.can-btm');

var serveLi = document.querySelector('.serve-list').children;
var unlook = document.querySelectorAll('.unlook');
var looks = document.querySelectorAll('.looks');
var serveImg = document.querySelector('.img-wrap').children[0];

var partner = document.querySelector('.partner-main');


// ____________________________页头____________________________
window.onscroll = function(e) {
    // 事件对象兼容写法
    var e = e || window.event;
    // 阻止默认行为
    e.preventDefault();
    if (window.pageYOffset >= (hMask.offsetHeight - header.offsetHeight)) {
        header.style.backgroundColor = '#fff';
        logoa.style.background = 'url(./images/pic_078.png) no-repeat center';
        logoa.style.backgroundSize = 'cover';
        for (var i = 1; i < nava.length; i++) {
            nava[i].style.color = '#000';
        }
        for (var i = 0; i < jiantou.length; i++) {
            jiantou[i].style.background = 'url(./images/下载1.png) no-repeat';
            jiantou[i].style.backgroundSize = 'contain';
        }
    } else {
        header.style.backgroundColor = 'rgba(0, 0, 0, 0)';
        logoa.style.background = 'url(./images/pic_079.png) no-repeat center';
        logoa.style.backgroundSize = 'cover';
        for (var i = 1; i < nava.length; i++) {
            nava[i].style.color = '#fff';
        }
        for (var i = 0; i < jiantou.length; i++) {
            jiantou[i].style.background = 'url(./images/下载.png) no-repeat';
            jiantou[i].style.backgroundSize = 'contain';
        }
    }
}


// ____________________________打开视频____________________________
oopen.onclick = function() {
    // 创建蒙版
    var mark = document.createElement('div');
    // 设置蒙版样式
    mark.style.width = '100%';
    mark.style.height = '100%';
    mark.style.backgroundColor = 'rgb(' + 0 + ',' + 0 + ',' + 0 + ')';
    mark.style.position = 'fixed';
    mark.style.left = 0;
    mark.style.top = 0;
    mark.style.zIndex = 999;
    mark.style.pointerEvents = 'auto';
    // 将蒙版添加到body里
    document.body.appendChild(mark);

    // 创建视频盒子
    var wrap = document.createElement('div');
    // 设置视频盒子样式
    wrap.style.width = '1020px';
    wrap.style.height = '100%';
    wrap.style.position = 'absolute';
    wrap.style.left = '50%';
    wrap.style.top = '50%';
    wrap.style.transform = 'translate(-50%,-50%)';
    // 将视频盒子添加到蒙版里
    mark.appendChild(wrap);

    // 创建video多媒体标签
    var video = document.createElement('video');
    video.style.width = '100%';
    video.style.height = '100%';
    video.src = 'https://vod.ddimg.mobi/f4cacab4vodsh1253127976/483b8db45285890818684723290/vjqajakH60sA.mp4';
    video.controls = 'true';
    video.autoplay = 'true';
    video.muted = 'true';
    // video添加到视频盒子里
    wrap.appendChild(video);

    // 创建关闭按钮
    var btn = document.createElement('button');
    // 设置按钮样式
    btn.style.width = '25px';
    btn.style.height = '25px';
    btn.style.border = 'none';
    btn.style.background = 'url(./images/close.png)';
    btn.style.backgroundSize = 'contain'
    btn.style.cursor = 'pointer';
    btn.style.position = 'absolute';
    btn.style.right = '10px';
    btn.style.top = '10px';
    // 将按钮添加到蒙版里
    mark.appendChild(btn);

    // 给关闭按钮添加事件
    btn.onclick = function() {
        mark.remove();
    }
}


// ____________________________轮播图____________________________
var timeId = null;
var timeId2 = null;
var num = 0;
var count = 0;
// 缓慢动画
function slowMove(dom, target) {
    clearInterval(timeId);
    timeId = setInterval(function() {
        if (dom.offsetLeft == target) {
            clearInterval(timeId);
        } else {
            var speed = (target - dom.offsetLeft) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            dom.style.left = dom.offsetLeft + speed + 'px';
        }
    }, 20)
}

// 右按钮
right.onclick = function() {
    num++;
    count++;
    if (num > item.length - 1) {
        num = 0;
    }
    if (count > liDom.length - 1) {
        list.style.left = 0;
        count = 1;
    }
    for (var i = 0; i < item.length; i++) {
        item[i].className = 'item';
    }
    item[num].className = 'item on';
    var target = count * liDom[0].offsetWidth;
    slowMove(list, -target);
}

//左按钮 
left.onclick = function() {
    if (num == 0) {
        num = item.length;
    }
    if (count == 0) {
        list.style.left = -liDom[liDom.length - 1].offsetLeft + 'px';
        count = liDom.length - 1;
    }
    num--;
    count--;
    for (var i = 0; i < item.length; i++) {
        item[i].className = 'item';
    }
    item[num].className = 'item on';
    var target = count * liDom[0].offsetWidth;
    slowMove(list, -target);
}

// 自动轮播
function autoPlay() {
    clearInterval(timeId2);
    timeId2 = setInterval(function() {
        right.onclick();
    }, 2000)
}
autoPlay();

// 进入时暂停
sildeshow.onmouseenter = function() {
    clearInterval(timeId2);
}

// 离开时继续
sildeshow.onmouseleave = function() {
    autoPlay();
}

// 焦点轮播
for (var i = 0; i < item.length; i++) {
    item[i].index = i;
    item[i].onclick = function() {
        for (var j = 0; j < item.length; j++) {
            item[j].className = 'item'
        }
        this.className = 'item on';
        var target = this.index * liDom[0].offsetWidth;
        slowMove(list, -target);
        count = this.index;
        num = this.index;
    }
}

// ____________________________画布____________________________
var waveTop = 0;
var x = 0;
var width = can.offsetWidth / 20;
var height = 20;
var ctx = can.getContext('2d');
var ctxBtm = canBtm.getContext('2d');

function goWave() {
    x -= 10;
    if (x < -width * 4) {
        x = 0;
    }
    ctx.clearRect(0, 0, can.offsetWidth, can.offsetHeight);
    ctx.beginPath();
    ctx.moveTo(x, height + waveTop);

    ctx.quadraticCurveTo(x + width * 1, waveTop, x + width * 2, height + waveTop);
    ctx.quadraticCurveTo(x + width * 3, height * 2 + waveTop, x + width * 4, height + waveTop);

    ctx.quadraticCurveTo(x + width * 5, waveTop, x + width * 6, height + waveTop);
    ctx.quadraticCurveTo(x + width * 7, height * 2 + waveTop, x + width * 8, height + waveTop);

    ctx.quadraticCurveTo(x + width * 9, waveTop, x + width * 10, height + waveTop);
    ctx.lineTo(x + width * 20, can.offsetHeight * 0.84);
    ctx.lineTo(x, can.offsetHeight * 0.84);
    ctx.closePath();

    ctx.fillStyle = '#0f4f3f';
    ctx.fill();
}
setInterval(goWave, 200);
goWave();

function goWave2() {
    x -= 10;
    if (x < -width * 4) {
        x = 0;
    }
    ctxBtm.clearRect(0, 0, can.offsetWidth, can.offsetHeight);
    ctxBtm.beginPath();
    ctxBtm.moveTo(x, height + waveTop);

    ctxBtm.quadraticCurveTo(x + width * 1, waveTop, x + width * 2, height + waveTop);
    ctxBtm.quadraticCurveTo(x + width * 3, height * 2 + waveTop, x + width * 4, height + waveTop);

    ctxBtm.quadraticCurveTo(x + width * 5, waveTop, x + width * 6, height + waveTop);
    ctxBtm.quadraticCurveTo(x + width * 7, height * 2 + waveTop, x + width * 8, height + waveTop);

    ctxBtm.quadraticCurveTo(x + width * 9, waveTop, x + width * 10, height + waveTop);
    ctxBtm.lineTo(x + width * 20, can.offsetHeight * -10);
    ctxBtm.lineTo(x, can.offsetHeight * -10);
    ctxBtm.closePath();

    ctxBtm.fillStyle = '#0f4f3f';
    ctxBtm.stroke();
    ctxBtm.fill();
}
setInterval(goWave2, 200);
goWave2();


// ____________________________叮咚服务____________________________
for (var i = 0; i < serveLi.length; i++) {
    serveLi[i].index = i;
    serveLi[i].onmouseenter = function() {
        // 排他
        for (var j = 0; j < serveLi.length; j++) {
            serveLi[j].style.height = '60px';
            serveLi[j].style.backgroundColor = 'rgba(0,0,0,0)';
            serveLi[j].style.marginBottom = '0';
            for (var k = 0; k < unlook.length; k++) {
                unlook[k].style.display = 'none';
                looks[k].children[0].src = './images/pic_0' + '2' + (k + 3) + '.png';
                looks[k].children[1].style.color = '#fff9e9';
            }
        }
        this.style.height = '88px';
        this.style.backgroundColor = '#fff9e9';
        this.style.marginBottom = '30px';
        unlook[this.index].style.display = 'block';
        looks[this.index].children[0].src = './images/pic_0' + '9' + (this.index + 3) + '.png';
        looks[this.index].children[1].style.color = '#ec7d4a';
        serveImg.src = './images/pic_10' + this.index + '.png';
    }
}


// ____________________________走马灯____________________________
var Pcount = partner.offsetLeft;

setInterval(function() {
    Pcount -= 1;
    if (-Pcount > partner.offsetWidth / 2) {
        partner.style.left = 5 + 'px';
        Pcount = partner.offsetLeft;
    } else {
        partner.style.left = Pcount + 'px';
    }
}, 5)